<!DOCTYPE HTML>
<html>
<head>
    <meta charset="UTF-8"/>
    <title>二吃一</title>
    <script src="/jquery/jquery-1.7.2.min.js"></script>

    <style>
        body{ text-align:center}
        table{
            width: 430px;
            height: 483px;
            background-image: url(/images/table.png);
            background-position: 0px 14px;
            background-repeat: no-repeat;
            background-size: 88%;
            margin:0 auto;
        }
        tr{width: 100%}
        td{width: 25%;
            text-align: center;
            font-size: 109px;
            background-repeat: no-repeat;
            background-size: 51%;
            cursor: pointer;
        }
        .red{
            background-image: url(/images/red.png);
        }
        .black{
            background-image: url(/images/black.png);
        }
        .red_b{
            background-image: url(/images/hong.png);
        }
        .black_b{
            background-image: url(/images/hei.png);
        }
    </style>
</head>
<body>
    <table  cellspacing="0" border="0">
        <tr><td xy="03"></td> <td xy="13"></td> <td xy="23"></td> <td xy="33"></td></tr>
        <tr><td xy="02"></td> <td xy="12"></td> <td xy="22"></td> <td xy="32"></td></tr>
        <tr><td xy="01"></td> <td xy="11"></td> <td xy="21"></td> <td xy="31"></td></tr>
        <tr><td xy="00"></td> <td xy="10"></td> <td xy="20"></td> <td xy="30"></td></tr>
    </table>
</body>
<script>
    /*<![CDATA[*/

        Array.prototype.toString=function () {
            return this[0]+''+this[1];
        }
        function Game() {
            this.current='red';
            this.selector=null;
            this.layout=function () {
                var arr=new Array();
                for(var x=0;x<4;x++){
                    for(var y=0;y<4;y++){
                        if(y==0){
                            arr.push([x+''+y,'red']);//1:red
                        }else if(y==3){
                            arr.push([x+''+y,'black']);//1:black
                        }else{
                            arr.push([x+''+y,0]);//0:空白
                        }
                    }
                }
                return arr;
            }
        }
        //选中
        Game.prototype.select=function (item) {
            var self=this;
            var cls = $(item).attr("class");
            var cln = $(item).attr("class-name");
            var xy = $(item).attr("xy");
            self.reset(cls, function () {
                $(item).attr("class", cln);
                $(item).attr("class-name", cls);
                if (cln.slice(-2) == "_b") {
                    self.selector = $(item).attr("xy");//记录被选中的坐标
                } else {
                    self.selector = null;//置空选中的坐标
                }
            })
        }
        //全部取消选中指定的颜色
        Game.prototype.reset=function (claz,classback) {
            var self=this;
            var data=self.data;
            for(var index=0;index<data.length;index++){
                if(claz==data[index][1]||claz==data[index][1]+"_b"){
                    $('td[xy="'+data[index][0]+'"]').attr("class",data[index][1]);
                    $('td[xy="'+data[index][0]+'"]').attr("class-name",data[index][1]+"_b");
                }
            }
            if(typeof(classback)=='function'){
                classback.call(this);
            }
        }
        Game.prototype.init=function () {
            var self=this;
            this.data=self.layout();
            var data=this.data;
            for(var index=0;index<data.length;index++){
                $('td[xy="'+data[index][0]+'"]').attr("class",data[index][1]);
                $('td[xy="'+data[index][0]+'"]').attr("class-name",data[index][1]+"_b");
            }
        }
        //新子位置替换旧子位置
        Game.prototype.step=function (new_xy,color) {
            var self=this;
            //删除旧坐标
            self.data=self.delete(self.selector);
            //增加新坐标
            self.data=self.add(new_xy,color);
            //置换选手
            self.current=self.current=='red'?'black':'red';
            self.selector=null;
            //吃子
            self.kill(new_xy,color);
        }
        //new_xy：刚刚落子坐标，color：落子的颜色
        Game.prototype.kill=function (new_xy,color) {
            var self=this;
            var new_x=parseInt(new_xy.split('')[0]);
            var new_y=parseInt(new_xy.split('')[1]);
            //横
            var right_1_xy=[new_x+1,new_y];
            var right_1_color=self.get_color(right_1_xy.toString());

            var right_2_xy=[new_x+2,new_y];
            var right_2_color=self.get_color(right_2_xy.toString());

            var right_3_xy=[new_x+3,new_y];
            var right_3_color=self.get_color(right_3_xy.toString());

            var left_1_xy=[new_x-1,new_y];
            var left_1_color=self.get_color(left_1_xy.toString());

            var left_2_xy=[new_x-2,new_y];
            var left_2_color=self.get_color(left_2_xy.toString());

            var left_3_xy=[new_x-3,new_y];
            var left_3_color=self.get_color(left_3_xy.toString());

            //如果落子在0y(最左侧)，右1相同，右2异同，右3无，则吃右2
            if(new_x==0&&right_1_color==color&&right_2_color!=0&&right_2_color!=color&&right_3_color==0) {
                //吃右2
                self.delete(right_2_xy.toString());
                return;
            }
            //如果落子在1y位，左1无，右1同，右2异，则吃右2
            if(new_x==1&&left_1_color==0&&right_1_color==color&&right_2_color!=0&&right_2_color!=color){
                //吃右2
                self.delete(right_2_xy.toString());
                return;
            }
            //如果落子在1y位，左1同，右1不同，右2无，则吃右1
            if(new_x==1&&left_1_color==color&&right_1_color!=0&&right_1_color!=color&&right_2_color==0){
                //吃右1
                self.delete(right_1_xy.toString());
                return;
            }
            //1y,左1异，右1同，右2无，则吃左1
            if(new_x==1&&left_1_color!=0&&left_1_color!=color&&right_1_color==color&&right_2_color==0){
                self.delete(left_1_xy.toString());
                return;
            }
            //如果落子在2y,右1空，左1同，左2异同，则吃左2侧
            if(new_x==2&&right_1_color==0&&left_1_color==color&&left_2_color!=0&&left_2_color!=color){
                //吃左2侧
                self.delete(left_2_xy.toString());
                return;
            }
            //如果落子在2y,右1同，左1不同，左2无，则吃左1
            if(new_x==2&&right_1_color==color&&left_1_color!=0&&left_1_color!=color&&left_2_color==0){
                //吃左2侧
                self.delete(left_1_xy.toString());
                return;
            }
            //2y,右1异，左1同，左2空，吃右1
            if(new_x==2&&right_1_color!=0&&right_1_color!=color&&left_1_color==color&&left_2_color==0){
                self.delete(right_1_xy.toString());
                return;
            }
            //如果落子在3y(最右侧)，左1相同，左2异同，左3无，则吃左2
            if(new_x==3&&left_1_color==color&&left_2_color!=0&&left_2_color!=color&&left_3_color==0) {
                //吃左2侧
                self.delete(left_2_xy.toString());
                return;
            }

            //竖
            var top_1_xy=[new_x,new_y+1];
            var top_1_color=self.get_color(top_1_xy.toString());

            var top_2_xy=[new_x,new_y+2];
            var top_2_color=self.get_color(top_2_xy.toString());

            var top_3_xy=[new_x,new_y+3];
            var top_3_color=self.get_color(top_3_xy.toString());

            var bottom_1_xy=[new_x,new_y-1];
            var bottom_1_color=self.get_color(bottom_1_xy.toString());

            var bottom_2_xy=[new_x,new_y-2];
            var bottom_2_color=self.get_color(bottom_2_xy.toString());

            var bottom_3_xy=[new_x,new_y-3];
            var bottom_3_color=self.get_color(bottom_3_xy.toString());

            //在x0,上1同，上2异，上3无，则吃上2
            if(new_y==0&&top_1_color==color&&top_2_color!=0&&top_2_color!=color&&top_3_color==0){
                self.delete(top_2_xy.toString());
                return;
            }
            //在x1，下1无，上1同，上2异，则吃上2
            if(new_y==1&&bottom_1_color==0&&top_1_color==color&&top_2_color!=0&&top_2_color!=color){
                self.delete(top_2_xy.toString());
                return;
            }
            //在x1，下1同，上1异，上2无，则吃上1
            if(new_y==1&&bottom_1_color==color&&top_1_color!=0&&top_1_color!=color&&top_2_color==0){
                self.delete(top_1_xy.toString());
                return;
            }
            //在x1，下1异 ，上1同，上2无，吃下1
            if(new_y==1&&bottom_1_color!=0&&bottom_1_color!=color&&top_1_color==color&&top_2_color==0){
                self.delete(bottom_1_xy.toString());
                return;
            }
            //在x2，下1同，下2异，上1无，则吃下2
            if(new_y==2&&bottom_1_color==color&&bottom_2_color!=0&&bottom_2_color!=color&&top_1_color==0){
                self.delete(bottom_2_xy.toString());
                return;
            }
            //在x2，上1同，下1异，下2无，则吃下1
            if(new_y==2&&top_1_color==color&&bottom_1_color!=0&&bottom_1_color!=color&&bottom_2_color==0){
                self.delete(bottom_1_xy.toString());
                return;
            }
            //在x2，下1同，下2空，上1异，吃上1
            if(new_y==2&&bottom_1_color==color&&bottom_2_color==0&&top_1_color!=0&&top_1_color!=color){
                self.delete(top_1_xy.toString());
                return;
            }
            //在x3，下1同，下2异，下3无，吃下2
            if(new_y==3&&bottom_1_color==color&&bottom_2_color!=0&&bottom_2_color!=color&&bottom_3_color==0){
                self.delete(bottom_2_xy.toString());
                return;
            }
        }
        Game.prototype.get_color=function (xy) {
            var self=this;
            var data_=self.data;
            for(var index=0;index<data_.length;index++){
                if(data_[index][0]==xy){
                   return data_[index][1];
                }
            }
            return null;
        }
        Game.prototype.add=function (new_xy,color) {
            var self=this;
            $('td[xy="'+new_xy+'"]').attr("class",color);
            $('td[xy="'+new_xy+'"]').attr("class-name",color+'_b');
            var self=this;
            var data_=self.data;
            for(var index=0;index<data_.length;index++){
                if(data_[index][0]==new_xy){
                    self.data[index][1]=color;
                    return self.data;
                }
            }
        }
        Game.prototype.delete=function (xy) {
            $('td[xy="'+xy+'"]').attr("class",'0');
            $('td[xy="'+xy+'"]').attr("class-name",'0_b');
            var self=this;
            var data_=self.data;
            for(var index=0;index<data_.length;index++){
                if(data_[index][0]==xy){
                    self.data[index][1]='0';
                    return self.data;
                }
            }
        }
        Game.prototype.addEvent=function () {
            var self=this;
            $("td").click(function () {
                var item=this;
                var cls = $(item).attr("class");
                var cln = $(item).attr("class-name");
                var xy = $(item).attr("xy");

                //如果已经选子，则判断当前点击处，是否符合落子条件
                if(self.selector!=null){
                    //1.当前位置没有棋子，
                    if(cls.substr(0,1)=='0') {
                        //2.紧邻被选中的棋子
                        var res = Math.abs(parseInt(xy) - parseInt(self.selector));
                        console.log('落子位置:'+res);
                        if (res == 1 || res == 10) {
                            //执行落子动作
                            self.step(xy,self.current);
                        } else {
                            alert('落子位置不符合');
                        }
                    }else if(xy==self.selector) {
                        //取消选中
                        $(item).attr("class", cln);
                        $(item).attr("class-name", cls);
                        self.selector = null;
                    }else if(cls.substr(0,3)==self.current||cls.substr(0,5)==self.current){
                        //重选
                        self.select(item);
                    }else{
                        alert('当前位置已有子');
                    }
                }else{
                    //是否是在选子（点击棋子），如果是：重置其他棋子，选中当前棋子
                    if(cls.substr(0,3)==self.current||cls.substr(0,5)==self.current) {
                        //重选
                        self.select(item);
                    }else if(cls.substr(0,1)=='0'){
                        alert('此处位置没有棋子');
                    }else{
                        alert('对方选子');
                    }
                }
            });
        }
        var game_;
        $(function () {
            game_=game_||new Game();
            game_.init();
            game_.addEvent();
        });
    /*]]>*/
</script>
</html>